<!doctype html>
<html lang="en">
<head>
	<title>注册 | 追溯系统</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
	<meta name="viewport"
	      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
	<van-nav-bar safe-area-inset-top></van-nav-bar>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
</style>
<body>
<div id="app">
	<van-nav-bar title="用户注册" left-text="返回" right-text=" "
	             left-arrow @click-left="onClickLeft"></van-nav-bar>

	<van-form @submit="submitForm">
		<van-field
			v-model="username"
			name="用户名"
			label="用户名"
			placeholder="用户名"
			:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
		<van-field
			v-model="password"
			type="password"
			name="密码"
			label="密码"
			placeholder="密码"
			:rules="[{ required: true, message: '请填写密码' }]"></van-field>
		<van-field
			v-model="nickname"
			name="昵称"
			label="昵称"
			placeholder="昵称"
			:rules="[{ required: true, message: '请填写昵称' }]"></van-field>
		<van-field
			v-model="phone"
			name="联系电话"
			label="联系电话"
			placeholder="联系电话"
			:rules="[{ required: true, message: '请填写联系电话' }]"></van-field>
		<van-field
			v-model="email"
			name="电子邮箱"
			label="电子邮箱"
			placeholder="电子邮箱"
			:rules="[{ required: true, message: '请填写电子邮箱' }]"></van-field>
		<div style="margin: 16px;">
			<van-button round block type="info" native-type="submit">提交</van-button>
		</div>
	</van-form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            onClickLeft() {
                location.replace("scan.html");
            },
            submitForm() {
                let _this = this;
                $.ajax({
                    url: 'http://localhost:8082/reg',
                    method: 'post',
                    data: {
                        nickname: _this.nickname,
                        username: _this.username,
                        pwd: _this.password,
                        roles: _this.roles,
                        phone: _this.phone,
                        email: _this.email,
                        remark: _this.remark
                    },
		                success:function (result) {
                        alert("注册成功！");
                    },
		                error:function (error) {
                        alert("注册失败！请重试!");
                    }
                })
            },
        },
        data() {
            return {
                username: "",
                password: '',
                nickname: '',
                roles: 'ROLE_user',
                phone: '',
                email: '',
                remark: ''
            }
        },

    })
</script>
</html>
